<full-content [(fullscreen)]="isfullscreen" style="overflow-y: scroll;">
  <div class="csp">
    <div class="csp-top">
      <div class="nav">
        <div class="logo">
          <img src="https://www.zhaodui.com.cn/pic/fxj/v2_pr3aaw.png" alt="">
        </div>
        <ul class="menu">
          <li class="active" (click)="goCsHome()">首页</li>
          <!-- <li (click)="goCscCenter()">催收中心</li> -->
          <li (click)="goCsGl()">催收管理</li>
          <li (click)="goCsCl()">催收策略</li>
          <li (click)="goCsTj()">催收统计</li>
        </ul>
      </div>
      <div class="user" nz-row [nzGutter]="24">
        <div class="user-l">
          <div class="avaster">
            <div class="img"><img src="{{avatar}}" alt=""></div>
            <div class="gou"></div>
          </div>
          <div class="info">
            <p>{{name}}，早上好！</p>
            <p>用户名：{{username}}</p>
          </div>
        </div>
        <div class="user-r">
            <div class="bgcolor">
              <div class="box">
                <div class="tit">
                  <i class="icon icon-01"></i>
                  <span>本月回款总额</span>
                </div>
                <div class="price">￥125,678.00</div>
              </div>
              <div class="box">
                <div class="tit">
                  <i class="icon icon-02"></i>
                  <span>当前案件逾期总额</span>
                </div>
                <div class="price">￥1,125,678.00</div>
              </div>
              <div class="box">
                <div class="tit">
                  <i class="icon icon-03"></i>
                  <span>本月逾期总额</span>
                </div>
                <div class="price">￥123,456.00</div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div class="csp-main">
      <div class="info">
        <div nz-row [nzGutter]="24">
          <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="2">
            <i class="warn"></i>
          </div>
          <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="22" class="info-txt">
            待办任务：当前待催收笔数
            <span>123</span>
            笔，本金：
            <span>￥123456789.00</span>，利息：
            <span>￥123456.00；</span>
          </div>
        </div>
      </div>
      <div nz-row [nzGutter]="24" style="margin-bottom: 20px;">
        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="18" class="nb">
          <div class="nb-t">
            <i class="icon icon-05"></i>
            <div class="nb-t-c">当前逾期催收名单</div>
            <div class="nb-t-r"></div>
          </div>
          <simple-table #st
            [columns]="columns"
            [data]="url"
            [ps]="ps"
            [extraParams]="q"
            [resReName]="{ total: 'total', list: 'data'}"
            [reqReName]="{pi:'pageNumber', ps: 'pageSize'}"
            toTopInChange
            [showTotal]="true"
            [showPagination]="true"
            [showSizeChanger]="true"
                      [scroll]="{  x: '1000px' }"
            (checkboxChange)="checkboxChange($event)"
            >
          </simple-table>
          <div class="nb-t">
            <i class="icon icon-06"></i>
            <div class="nb-t-c">当前回款数据</div>
            <div class="nb-t-r"></div>
          </div>
          <simple-table #st
            [columns]="columnsa"
            [data]="url"
            [ps]="ps"
            [extraParams]="q"
            [resReName]="{ total: 'total', list: 'data'}"
            [reqReName]="{pi:'pageNumber', ps: 'pageSize'}"
            toTopInChange
            [showTotal]="true"
            [showPagination]="true"
            [showSizeChanger]="true"
            [scroll]="{  x: '1000px' }"
            (checkboxChange)="checkboxChange($event)"
            >
          </simple-table>
        </div>
        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="6">
          <div class="mb">
            <div class="mb-t">
              <i class="icon icon-04"></i>
              <div class="mb-t-c">预计赔款/不良</div>
            </div>
            <div class="mb-w">
              <p>本月赔付笔数<span>3</span>笔，金额<span>345678</span>元；</p>
              <p>历史赔付笔数<span>13</span>笔，金额<span>12345678</span>元；</p>
            </div>
          </div>
          <div class="mb">
            <div class="mb-t">
              <i class="icon icon-07"></i>
              <div class="mb-t-c">MOB分类</div>
            </div>
            <div class="bar">
              <div class="bar-b">
                <g2-bar height="200" style="width: 100%" [title]=" " [data]="MobData"></g2-bar>
                <p class="M1">M1 笔数：93笔  金额：123456789元</p>
                <p class="M2">M2 笔数：17笔  金额：3456789元</p>
                <p class="M3">M3 笔数：28笔  金额：456789元</p>
                <p class="M4">M4 笔数：12笔  金额：3456789元</p>
                <p class="MOB">MOB 总数：150笔  金额：473,456,789.00元</p>
              </div>
            </div>
            
          </div>
          <div class="mb">
            <div class="mb-t">
              <i class="icon icon-04"></i>
              <div class="mb-t-c">今日回款</div>
            </div>
            <div class="mb-w">
              <p>今日回款笔数<span>12</span>笔；</p>
              <p>今日回款金额：<span>32248</span>元；</p>
            </div>
          </div>
          <div class="mb">
            <div class="mb-t">
              <i class="icon icon-08"></i>
              <div class="mb-t-c">催收排行榜</div>
            </div>
            <div class="rank">
              <ul class="rank-list">
                <li *ngFor="let i of rankingListData; let idx = index">
                  <span class="number" [ngClass]="{'active': idx < 3}">{{idx+1}}</span>
                  <span class="title">{{i.title}}</span>
                  <span class="value">{{i.total | number: '3.0'}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      
    </div>

  </div>

  <!-- <div nz-row [nzGutter]="24">
    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="18">11</div>
    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="6">11</div>
  </!--> 

</full-content>